<template>
  <div class="code-drawer">
    <div class="code-but-operation">
      <el-button type="primary" icon="el-icon-plus el-icon--left" @click="addBut">添加表单</el-button>
    </div>
    <draggable v-model="propsData.formProp.formData">
      <ul class="code-but-array" v-for="(item,key) in propsData.formProp.formData" :key="key">
        <li>
          <span>表单名称</span>
          <el-input v-model="item.name" placeholder="表单名称" clearable></el-input>
        </li>
        <li>
          <span>方式</span>
          <el-select v-model="item.drawerOrDialog" placeholder="方式">
            <el-option
                v-for="item in $store.state.drawerOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </li>
        <template v-if="item.drawerOrDialog.includes('抽屉') || item.drawerOrDialog.includes('对话框')">
          <li>
            <span>字段名称</span>
            <el-input v-model="item.field" placeholder="字段名称" clearable></el-input>
          </li>
          <li class="del">
            <el-button type="primary" @click="setContentClick(key)">设置表单内容</el-button>
          </li>
        </template>
        <template v-else>
          <li>
            <span>选择api</span>
            <el-select v-model="item.choiceApi" placeholder="选择api">
              <el-option
                  v-for="item in propsData.apiProp.apiArray"
                  :key="item.name"
                  :label="item.notes"
                  :value="item.name">
              </el-option>
            </el-select>
          </li>
          <li>
            <span>固定参数</span>
            <el-input v-model="item.params" placeholder="固定参数{aa:bb}" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" clearable></el-input>
          </li>
          <li>
            <span>提示内容</span>
            <el-input v-model="item.promptContent" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"  placeholder="提示内容" clearable></el-input>
          </li>
        </template>
        <li class="del">
          <el-button type="danger" @click="delBut(key)">删除表单</el-button>
        </li>

      </ul>
    </draggable>

    <!--设置表单内容 抽屉-->
    <el-drawer
        title="设置表单内容"
        :visible.sync="setContentProp.isDrawer"
        direction="rtl"
        :append-to-body="true"
        :modal-append-to-body="false"
        size="88%"
    >
      <div class="code-drawer1">
        <div class="code-but-operation">
          <el-button type="warning" icon="el-icon-plus el-icon--left" @click="addFormContentClick">添加表单内容</el-button>
        </div>
        <draggable v-model="setContentProp.contentArray">
          <ul class="code-but-array" v-for="(item,key) in setContentProp.contentArray" :key="key">
            <li class="but-color2">
              <span>内容类型</span>
              <el-select v-model="item.type" placeholder="内容类型">
                <el-option
                    v-for="item in $store.state.drawerContentTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </li>
            <li v-if="item.type=='头部'">
              <span>表头名称</span>
              <el-input v-model="item.titleName" placeholder="表头名称" clearable></el-input>
            </li>
            <template v-if="item.type!='头部'">
              <template v-if="item.type.includes('表格')">
                <li>
                  <span>字段名称</span>
                  <el-input v-model="item.fieldName" placeholder="字段名称" clearable></el-input>
                </li>
                <li>
                  <el-button type="warning" @click="tableOperationButtonClick(item)" class="ml-12">表格操作配置</el-button>
                </li>
              </template>
              <li v-if="item.type.includes('内容')">
                <el-collapse v-model="item.contentArrayActive" accordion>
                  <el-collapse-item title="api配置" name="1" class="code-option-collapse">
                    <ul class="code-option-api-css">
                      <li>
                        <label>回显api</label>
                        <el-select v-model="item.echoChoiceApi" placeholder="选择api" style="width: 200px">
                          <el-option
                              v-for="item in propsData.apiProp.apiArray"
                              :key="item.name"
                              :label="item.notes"
                              :value="item.name">
                          </el-option>
                        </el-select>
                      </li>
                      <li v-if="item.type=='输入内容'">
                        <label>提交api</label>
                        <el-select v-model="item.submitChoiceApi" placeholder="选择api" style="width: 200px">
                          <el-option
                              v-for="item in propsData.apiProp.apiArray"
                              :key="item.name"
                              :label="item.notes"
                              :value="item.name">
                          </el-option>
                        </el-select>
                      </li>
                    </ul>
                  </el-collapse-item>
                </el-collapse>
              </li>
              <li>
                <el-button type="primary" @click="fieldConfigurationClick(item)" class="ml-12">字段配置</el-button>
              </li>

            </template>
            <li class="del">
              <el-button type="danger" @click="deleteFormContent(key)">删除表单内容</el-button>
            </li>
          </ul>
        </draggable>
      </div>
    </el-drawer>

    <!--字段配置-->
    <el-drawer
        title="字段配置"
        :visible.sync="fieldConfigurationProp.isDrawer"
        direction="rtl"
        :append-to-body="true"
        :modal-append-to-body="false"
        size="85%"
    >
      <div class="code-but-operation">
        <el-button type="primary" icon="el-icon-plus el-icon--left" @click="addButFiledClick">添加字段</el-button>
      </div>
      <div class="code-but-operation mb-12">
        <span class="s">数据解析</span>
        <el-input v-model="fieldConfigurationProp.dataParsing" placeholder="数据格式 status;//审批状态:1待审批/2不通过/3通过" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" clearable
                  class="mr-12"></el-input>
        <el-button type="primary" @click="startParsingClick">开始解析</el-button>
      </div>
      <div class="code-drawer2">
        <draggable v-model="fieldConfigurationProp.fieldArray">
          <ul class="code-but-array" v-for="(item,key) in fieldConfigurationProp.fieldArray" :key="key">
            <li>
              <span>字段名称</span>
              <el-input v-model="item.name" placeholder="字段名称" clearable></el-input>
            </li>
            <li>
              <span>字段</span>
              <el-input v-model="item.field" placeholder="字段" clearable></el-input>
            </li>
            <li class="but-type">
              <span>数据类型</span>
              <el-select v-model="item.type" placeholder="数据类型">
                <el-option
                    v-for="item in $store.state.dataTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
              <el-select v-model="item.optionField" v-if="item.type.includes('单选框') || item.type.includes('多选框') || item.type.includes('下拉框')" placeholder="选择下拉选项">
                <el-option
                    v-for="item in propsData.optionProp.optionArray"
                    :key="item.value"
                    :label="item.notes"
                    :value="item.field">
                </el-option>
              </el-select>
              <template v-if="item.type.includes('范围')">
                <el-input v-model="item.startField" placeholder="开始字段" clearable></el-input>
                <el-input v-model="item.endField" placeholder="结束字段" clearable></el-input>
              </template>
              <el-select v-model="item.singleFile" v-if="item.type.includes('上传')" placeholder="多个文件上传还是单个">
                <el-option
                    v-for="item in $store.state.singleFileOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </li>
            <li class="but-color">
              <span style="width: 65px">是否必填</span>
              <el-select v-model="item.required" placeholder="是否必填">
                <el-option
                    v-for="item in $store.state.booleanOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </li>
            <li class="but-color">
              <span style="width: 75px">是否联表id</span>
              <el-select v-model="item.jointTableIdRequired" placeholder="是否必填">
                <el-option
                    v-for="item in $store.state.booleanOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </li>
            <li class="but-color">
              <span style="width: 65px">是否显示</span>
              <el-select v-model="item.displayOrNot" placeholder="是否显示">
                <el-option
                    v-for="item in $store.state.booleanOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </li>
            <li class="del">
              <el-button type="danger" @click="deleteFieldClick(key)">删除字段</el-button>
            </li>
          </ul>
        </draggable>
      </div>
    </el-drawer>

    <!--表格操作配置-->
    <el-drawer
        title="表格操作配置"
        :visible.sync="tableOperationButtonProp.isDrawer"
        direction="rtl"
        :append-to-body="true"
        :modal-append-to-body="false"
        size="85%"
    >
      <div class="code-but-operation">
        <el-button type="primary" icon="el-icon-plus el-icon--left" @click="addTableOperationsClick">添加表格操作</el-button>
      </div>

      <div class="code-drawer2">
        <draggable v-model="tableOperationButtonProp.tableOperationButtonArray">
          <ul class="code-but-array" v-for="(item,key) in tableOperationButtonProp.tableOperationButtonArray" :key="key">
            <li>
              <span>表格类型</span>
              <el-select v-model="item.type" placeholder="选择api">
                <el-option
                    v-for="item in $store.state.formOperationsType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </li>
            <li>
              <span>按钮名称</span>
              <el-input v-model="item.name" placeholder="按钮名称" clearable></el-input>
            </li>
            <li>
              <span>按钮方法名称</span>
              <el-input v-model="item.methodName" placeholder="按钮方法名称" clearable></el-input>
            </li>
            <li class="but-color">
              <span>按钮颜色</span>
              <el-select v-model="item.color" placeholder="按钮颜色">
                <el-option
                    v-for="item in $store.state.butColorOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </li>
            <li class="but-icon">
              <span>按钮图标</span>
              <e-icon-picker v-model="item.icon">
                <template #prepend="{icon}">
                  <e-icon :icon-name="icon" class="e-icon"/>
                </template>
                <template #icon="{icon}">
                  <e-icon :icon-name="icon" class="e-icon"/>
                </template>
              </e-icon-picker>
            </li>
            <li>
              <span>选择操作表单</span>
              <el-select v-model="item.choiceFrom" placeholder="选择操作表单">
                <el-option
                    v-for="item in propsData.formProp.formData"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name">
                </el-option>
              </el-select>
            </li>
            <li class="del">
              <el-button type="danger" @click="delTableOperations(key)">删除表格操作</el-button>
            </li>

          </ul>
        </draggable>
      </div>
    </el-drawer>


  </div>
</template>

<script>
export default {
  components: {},
  props: ['propsData'],
  data() {
    return {
      //设置表单内容抽屉
      setContentProp: {
        isDrawer: false,
        drawerKey: '',//设置第几个表单
        //表单内容
        contentArray: [
          // {
          //   type: '显示',//头部  显示 显示表格 输入内容 输入表格
          //   titleName: '',//表头名称
          //   fieldName: '',//字段名称
          //   contentArrayActive: '1',//折叠固定打开1
          //   echoChoiceApi: '',//回显选择api
          //   submitChoiceApi: '',//提交选择api
          //   dataParsing: '',//数据解析
          //   fieldArray: [],//字段数组
          //   params:'',//固定参数
          // }
        ],
      },
      // 字段配置
      fieldConfigurationProp: {
        isDrawer: false,
        dataParsing: '',//字段解析
        fieldArray: [
          // {
          //   name: '',//字段名称 用于注释
          //   field: '',//字段
          //   type: '输入框',//数据类型
          //   startField: '',//开始字段
          //   endField: '',//结束字段
          //   optionField: '',//选项字段
          //   singleFile:true,//是否多个文件  true 多个
          //   required:false,//是否必填 true 必填
          //   jointTableIdRequired:false,//是否联表id true 是
          //   displayOrNot:true,//是否显示 true 是
          // }
        ]
      },
      //表格操作配置
      tableOperationButtonProp: {
        isDrawer: false,
        tableOperationButtonArray: [
          {
            type:'输入表格',
            name: '',//按钮名称
            methodName: '',//按钮方法名称
            icon: 'el-icon-check',//按钮图标
            color: 'primary',//按钮颜色
            choiceFrom:'',//选择操作表单
          }
        ]
      }
    };
  },
  mounted() {
  },
  methods: {
    //表单设置---添加表单
    addBut() {
      let jsonData = {
        name: '',//表单名称
        field: '',//字段名称
        drawerOrDialog: '抽屉回显/提交',//抽屉 选择，是抽屉还是提示框
        promptContent: '',//提示内容
        choiceApi: '',//选择api
        params:'',//固定参数
        //表格内容
        contentArray: [],
      }
      this.propsData.formProp.formData.push(jsonData);
    },
    //表单设置---删除表单
    delBut(key) {
      this.propsData.formProp.formData.splice(key, 1);
    },
    //表单设置---设置表单内容
    setContentClick(key) {
      this.setContentProp.drawerKey = key;
      this.setContentProp.contentArray = this.propsData.formProp.formData[key].contentArray;
      this.setContentProp.isDrawer = true;
    },

    //设置表单内容---添加表单内容
    addFormContentClick() {
      let jsonData = {
        type: '头部',//头部  显示 显示表格 输入内容 输入表格
        titleName: '',//表头名称
        fieldName: '',//字段名称
        contentArrayActive: '1',//折叠固定打开1
        echoChoiceApi: '',//回显选择api
        submitChoiceApi: '',//提交选择api
        dataParsing: '',//数据解析
        fieldArray: [],//字段数组
        tableOperationButtonArray: [],//表格操作按钮数组
      }
      this.propsData.formProp.formData[this.setContentProp.drawerKey].contentArray.push(jsonData)
    },
    //设置表单内容---字段配置
    fieldConfigurationClick(item) {
      this.fieldConfigurationProp.isDrawer = true;
      this.fieldConfigurationProp.fieldArray = item.fieldArray;
    },
    //设置表单内容---删除表单内容
    deleteFormContent(key) {
      this.setContentProp.contentArray.splice(key, 1);
    },
    //设置表单内容---表格操作配置
    tableOperationButtonClick(item) {
      this.tableOperationButtonProp.isDrawer = true;
      this.tableOperationButtonProp.tableOperationButtonArray = item.tableOperationButtonArray;
    },

    //字段配置---添加字段
    addButFiledClick() {
      let dataJson = {
        name: '',//字段名称
        field: '',//字段
        type: '输入框',//数据类型
        startField: '',//开始字段
        endField: '',//结束字段
        optionField: '',//选项字段
        singleFile: true,//是否多个文件  true 多个
        required: false,//是否必填 true 必填
        jointTableIdRequired: false,//是否联表id true 是
        displayOrNot: true,//是否显示 true 是
      }
      this.fieldConfigurationProp.fieldArray.push(dataJson);
    },
    //字段配置---删除字段
    deleteFieldClick(key) {
      this.fieldConfigurationProp.fieldArray.splice(key, 1);
    },
    //字段配置---数据解析
    startParsingClick() {
      if (!this.fieldConfigurationProp.dataParsing) {
        return false
      }
      let dataParsing = this.fieldConfigurationProp.dataParsing.split('\n');
      for (let i = 0; i < dataParsing.length; i++) {
        let data = dataParsing[i].trim().split(';//');
        let fieldJsonData = {
          name: data[1],//字段名称
          field: data[0],//字段
          type: '输入框',//数据类型
          startField: '',//开始字段
          endField: '',//结束字段
          optionField: '',//选项字段
          singleFile: true,//是否多个文件  true 多个
          required: false,//是否必填 true 必填
          jointTableIdRequired: false,//是否联表id true 是
          displayOrNot: true,//是否显示 true 是
        }
        this.fieldConfigurationProp.fieldArray.push(fieldJsonData);
      }
      this.$message.success('解析成功')
    },

    //表格操作配置---添加表格操作
    addTableOperationsClick() {
        let jsonData={
          type:'输入表格',
          name: '',//按钮名称
          methodName: '',//按钮方法名称
          icon: 'el-icon-check',//按钮图标
          color: 'primary',//按钮颜色
          choiceFrom:'',//选择操作表单
        }
      this.tableOperationButtonProp.tableOperationButtonArray.push(jsonData);
    },
    //表格操作配置---删除表格操作
    delTableOperations(key){
      this.tableOperationButtonProp.tableOperationButtonArray.splice(key, 1);
    }
  },
};
</script>

<style lang="scss" scoped></style>
